<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import {
  getApiInfo,
  getWxSdk
} from '@/http'

export default {
  data() {
    return {
      apiInfo: {},
      wxSdk: {}
    }
  },
  created() {
    this.wxInit()
  },
  methods: {
    async asyncData() {
      const url = window.location.href.split('#')[0]
      const req1 = getWxSdk(url)
      const req2 = getApiInfo()
      const res = await Promise.all([req1, req2])
      if (res[0].code === 200) {
        this.wxSdk = res[0].data
      } else {
        this.$Message.error(res[0].msg)
      }
      window.document.title = res[1].data.title || '图片直播'
      this.apiInfo = res[1]
      this.$store.commit('setSiteInfo', res[1])
    },
    async wxInit() {
      await this.asyncData()
      const _this = this
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: this.wxSdk.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: this.wxSdk.timestamp, // 必填，生成签名的时间戳
        nonceStr: this.wxSdk.nonceStr, // 必填，生成签名的随机串
        signature: this.wxSdk.signature, // 必填，签名，见附录1
        jsApiList: [
          'chooseImage',
          'uploadImage',
          'onMenuShareTimeline',
          'hideOptionMenu',
          'showMenuItems',
          'onMenuShareAppMessage'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })

      wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        // 分享到朋友圈
        // const url = window.location.href.split('#')[0]
        wx.onMenuShareTimeline({
          title: _this.apiInfo.share.title,
          desc: _this.apiInfo.share.desc,
          link: window.location.href,
          imgUrl: _this.apiInfo.share.imgUrl || 'http://cn-weipingtai.oss-cn-shenzhen.aliyuncs.com/huodong/image/20180730/1532936503483.jpg',
          success: function () {
            _this.$Message.success('分享成功')
          }
        })
        // 转发分享
        wx.onMenuShareAppMessage({
          title: _this.apiInfo.share.title,
          desc: _this.apiInfo.share.desc,
          link: window.location.href,
          imgUrl: _this.apiInfo.share.imgUrl || 'http://cn-weipingtai.oss-cn-shenzhen.aliyuncs.com/huodong/image/20180730/1532936503483.jpg',
          type: '',
          dataUrl: '',
          success: function () {
            _this.$Message.success('分享成功')
          }
        })

        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log(res)
        })
      })
    }
  }
}
</script>

<style lang="scss">
body {
  background-color: #111 !important;
}
img {
  vertical-align: middle;
}
.img100 {
  width: 100%;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff !important;
}
</style>
